<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>图片缩放</title>
	<link rel="stylesheet" type="text/css" href="css/global_121024_uncompress.css">
	<script type="text/javascript" src="js/jquery-1.7.js"></script>
</head>
<body>
	<h1>图片缩放</h1>
	<p class="note"><em>note:</em></p>
<script type="text/javascript">
/*
 * 名称:图片缩放
 * 说明:图片等比例缩放
 * @param {number} options.width 设置宽度
 * @param {number} options.height 设置高度
 */
	// w.imageZoom = function($this, options) {
(function($, w) {
	$.fn.imageZoom = function(options){
		return $(this).each(function() {
			if ($.isEmptyObject(options)) return;
			var opts = {
				width: 0,
				height: 0
			}
			opts = $.extend(opts, options);
			var $this = $(this);
			var imgW = $this.width(),
				imgH = $this.height();			
			if (imgW > opts.width && opts.width > 0) {
				if(opts.height == 0){
						$this.width(opts.width);
						$this.height(opts.width / imgW * imgH);
				}else{
					if (imgW / imgH > opts.width / opts.height) {
						$this.width(opts.width);
						$this.height(opts.width / imgW * imgH);
					} else {
						$this.height(opts.height);
						$this.width(opts.height / imgH * imgW);
					}
				}
			} else if (imgH > opts.height && opts.height > 0) {
				if(opts.width == 0){
						$this.height(opts.height);
						$this.width(opts.height / imgH * imgW);
				}else{
					if (imgH / imgW > opts.height / opts.width) {
						$this.height(opts.height);
						$this.width(opts.height / imgH * imgW);
					} else {
						$this.width(opts.width);
						$this.height(opts.width / imgW * imgH);
					}
				}
			}
			return;
		})
	};
})(jQuery, window)
</script>
<p>demo:</p>
<table>
	<tr>
		<td>
			<img src="1.jpg" width="100" height="100" alt="" />
		</td>
		<td>
			<img src="2.jpg" width="100" height="50" alt="" />
		</td>
		<td>
			<img src="3.jpg" width="50" height="100" alt="" />
		</td>
		<td>
			<img src="4.jpg" width="70" height="20" alt="" />
		</td>
		<td>
			<img src="5.jpg" width="100" height="100" alt="" />
		</td>
		<td>
			<img src="6.jpg" width="30" height="30" alt="" />
		</td>
	</tr>
</table>
<script type="text/javascript">
	$("img").imageZoom({width:50,height:50});
</script>
</body>
</html>